import { useImageStore } from '@/domain/correction/hooks/image';
import { computed, defineComponent, onMounted, onUnmounted, reactive, Ref, ref, toRaw } from 'vue';
import { Popup } from 'vant';
export default defineComponent({
  name: 'bottomHeader',
  props: {
    name: {
      default: '',
      type: String
    },
    ok: {
      type: Function,
      default: () => {}
    },
    okShow: {
      type: Boolean,
      default: true
    },
    cannel: {
      type: Function,
      default: () => Boolean
    }
  },
  setup(props) {
    const store = useImageStore();
    return () => (
      <div class={' fixed bottom-1 h-r3.5 w-full bg-gray-50'}>
        <div class={' h-r2.85 w-full flex text-r1.3 p-2'}>
          <span
            class={'flex-none  h-r3'}
            onClick={() => {
              const status = props.cannel();
              //取消图像按钮状态
              if (status) {
                store.state.activeImageManages?.im.flyback();
              }
            }}
          >
            <i class={'iconfont icon-a-bianzu23 text-r1.3 ml-2'}></i>
          </span>
          <span class={'flex-grow text-center text-r1.4'}>{props.name}</span>
          <span
            class={'flex-none  h-r3'}
            onClick={() => {
              props.ok();
            }}
          >
            <i class={'iconfont icon-a-bianzu24 text-r1.3 text-primary-bluelight mr-2'} style={{ display: props.okShow ? 'block' : 'none' }}></i>
          </span>
        </div>
      </div>
    );
  }
});
